<%--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ include file="/layout/tag.jsp"%>
<script>
	KE.show({
		id : 'detailContent',
		cssPath : '../editor/index.css',
		afterCreate : function(id) {
			KE.event.ctrl(document, 13, function() {
				KE.sync(id);
				document.forms['example'].submit();
			});
			KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
				KE.sync(id);
				document.forms['example'].submit();
			});
		}
	});
	
	$(document).ready(
		function() {
			//事件注册.
			$("#saveBtn").click(saveBook);
			$("#returnBtn").click(returnToList);
			$("#imgUploadBtn").click(imgUpload);
			
			$("#allTab").click(showAllTab);
			$("#stockTab").click(showStockTab);
			$("#relationTab").click(showRelationTab);
			$("#detailTab").click(showDetailTab);
			
			//设置左菜单对应菜单CSS为选中状态.
			<c:if test="${oper=='new'}">
			changeToActiveCss("menu_2020");
			</c:if>
			<c:if test="${oper=='modify'}">
			changeToActiveCss("menu_2010");
			</c:if>
			
			//消息显示.
			var msg = '<c:out value="${msg}"/>';
			if (msg != "") {
				alert(msg);
			}
		}
	);
	
	function showAllTab() {
		$("#allTab").attr("class", "curentTab");
		$("#stockTab").attr("class", "tab");
		$("#relationTab").attr("class", "tab");
		$("#detailTab").attr("class", "tab");
		
		$("#baseInfo").show();
		$("#stockInfo").show();
		$("#relationInfo").show();
		$("#detailInfo").show();
	}
	
	function showStockTab() {
		$("#allTab").attr("class", "tab");
		$("#stockTab").attr("class", "curentTab");
		$("#relationTab").attr("class", "tab");
		$("#detailTab").attr("class", "tab");
		
		$("#baseInfo").hide();
		$("#stockInfo").show();
		$("#relationInfo").hide();
		$("#detailInfo").hide();
	}
	
	function showRelationTab() {
		$("#allTab").attr("class", "tab");
		$("#stockTab").attr("class", "tab");
		$("#relationTab").attr("class", "curentTab");
		$("#detailTab").attr("class", "tab");
		
		$("#baseInfo").hide();
		$("#stockInfo").hide();
		$("#relationInfo").show();
		$("#detailInfo").hide();
	}
	
	function showDetailTab() {
		$("#allTab").attr("class", "tab");
		$("#stockTab").attr("class", "tab");
		$("#relationTab").attr("class", "tab");
		$("#detailTab").attr("class", "curentTab");
		
		$("#baseInfo").hide();
		$("#stockInfo").hide();
		$("#relationInfo").hide();
		$("#detailInfo").show();
	}
	
	function imgUpload() {
		showDialog("imgUpload");
	}
	
	function saveBook() {
		if(confirm("确定要保存图书信息吗?")) {
			var action = $("#baseEditForm").attr("action");
			action += "?oper=" + '<c:out value="${oper}"/>';
			$("#baseEditForm").attr("action", action);
			$("#baseEditForm").submit();
		}
	}
	
	function returnToList() {
		window.location.href='${pageContext.request.contextPath}/main/enterBookList.do';
	}
</script>

<div id="content_right">
	<div style="width:100%;height:35px;line-height:35px;text-align:left;background-color:#F5FAFA;font-weight:bold; ">图书 > 图书管理 > <c:if test="${oper=='new'}">添加图书</c:if><c:if test="${oper=='modify'}">编辑图书</c:if></div>
	<div>
		<div id="tabBar">
			<span id="allTab" class="curentTab">图书总览</span>
			<span id="stockTab" class="tab">库存管理</span>
			<span id="relationTab" class="tab">相关图书</span>
			<span id="detailTab" class="tab">详细介绍</span>
		</div>
		<div class="buttons" style="float:right; ">
			<a id="saveBtn" href="#">
				<img src="../images/btn_apply.png" alt=""/> 
				保存
			</a>
			<a id="returnBtn" href="#">
				<img src="../images/btn_apply.png" alt=""/> 
				返回列表
			</a>
		</div>
	</div>
	<div id="editContainer">
		<form:form id="baseEditForm" action="${pageContext.request.contextPath}/main/saveBook.do" commandName="book">
		<div id="baseInfo" class="editPanel">
			<span class="title">基本信息</span>
			<div style="clear:both;"></div>
			<div style="float:left; width:68%;margin-left:10px;">
				<form:hidden path="sysId" />
				<table>
					<tr>
						<th>所属分类：</th>
						<td>
							<c:if test="${empty book.goodsCtgs}">暂未分类</c:if>
							<c:if test="${!empty book.goodsCtgs}">
								<c:forEach var="item" items="${book.goodsCtgs}" varStatus="status">
									<li>${item.name1}/${item.name2}</li>
								</c:forEach>
							</c:if>
						</td>
					</tr>
					<tr>
						<th>商品名称：</th>
						<td><form:input path="name" cssStyle="width:100px; " maxlength="15"/></td>
					</tr>
					<tr>
						<th>ISBN：</th>
						<td><form:input path="isbn" cssStyle="width:100px; " maxlength="20"/></td>
					</tr>
					<tr>
						<th>内部编号：</th>
						<td><form:input path="innerCode" cssStyle="width:100px; " maxlength="6"/></td>
					</tr>
					<tr>
						<th>出版社：</th>
						<td><form:input path="publish" cssStyle="width:100px; " maxlength="15"/></td>
					</tr>
					<tr>
						<th>作者：</th>
						<td><form:input path="author" cssStyle="width:100px; " maxlength="12"/></td>
					</tr>
					<tr>
						<th>国家：</th>
						<td><form:input path="country" cssStyle="width:100px; " maxlength="12"/></td>
					</tr>
					<tr>
						<th>适宜年龄：</th>
						<td></td>
					</tr>
					<tr>
						<th>货架号：</th>
						<td><form:input path="innerSerial" cssStyle="width:100px; " maxlength="4"/></td>
					</tr>
					<tr>
						<th>是否上架：</th>
						<td>
							<form:select path="deploy" cssStyle="width:80px; ">
							  <form:option value="" label=""/>
							  <form:options items="${staList}" itemValue="itemValue" itemLabel="itemLabel"/>
							</form:select>
						</td>
					</tr>
					<tr>
						<th>价格：</th>
						<td><form:input path="price" cssStyle="width:100px; " maxlength="10"/></td>
					</tr>
					<tr>
						<th>实际购买价格：</th>
						<td><form:input path="buyPrice" cssStyle="width:100px; " maxlength="10"/></td>
					</tr>
				</table>
			</div>
			<div style="float:right; width:24%;background-color:white; padding:15px;margin-right:10px;">
				<div class="buttons" style="height:30px;line-height:30px;">
					<a id="imgUploadBtn" href="#">
						<img src="../images/btn_apply.png" alt=""/> 
						上传新图片
					</a>
				</div>
				<div style="border:1px solid #F0F0F0;width:200px;height:200px;float:left;">
					<p></br>
					此处显示图书图片.</br>
					[您还未上传图片]</p>
				</div>
			</div>
			<div style="clear:both;"></div>
		</div>
		<div id="detailInfo" class="editPanel" style="height:440px; ">
			<span class="title">详细信息</span>
			<div style="clear:both;"></div>
			<div style="margin-left:10px; ">
			<form:textarea path="detailContent" cssStyle="display:block;float:left;width:700px;height:400px;visibility:hidden;" />
			</div>
		</div>
		</form:form>
		
		<div id="stockInfo" class="editPanel" style="height:160px; ">
			<span class="title">库存管理</span><span style="marin-left:400px;height:25px;line-height:25px; ">总购买数量:10&nbsp;&nbsp;&nbsp;在库数量:4&nbsp;&nbsp;&nbsp;在租数量:4&nbsp;&nbsp;&nbsp;报损数量:2</span>
			<div style="clear:both;"></div>
			<div style="float:left; width:96%;margin-left:10px;height:135px;overflow-y:scroll;overflow-x:hidden;border:1px solid white;">
				<table class="relationTable">
					<tr>
						<th style="width:90px;">
							<div class="buttons" style="float:left; margin-left:5px;">
								<a href="" class="regular"><!-- class="regular"-->
									<img src="../images/btn_apply.png" alt=""/> 
									添加
								</a>
							</div>
						</th>
						<th style="width:100px;">
							购买日期
						</th>
						<th style="width:80px;">
							数量
						</th>
						<th style="width:600px;">
							备注
						</th>
					</tr>
					<tr>
						<td><img src="../images/btn_cross.png" alt=""/></th>
						<td>2011/09/10</td>
						<td>2</td>
						<td align="left"></td>
					</tr>
				</table>
				<div style="height:1px;clear:both;"></div>
			</div>
		</div>
		<div id="relationInfo" class="editPanel" style="height:160px; ">
			<span class="title">相关图书</span>
			<div style="clear:both;"></div>
			<div style="float:left; width:96%;margin-left:10px;height:135px;overflow-y:scroll;overflow-x:hidden;border:1px solid white;">
				<table class="relationTable">
					<tr>
						<th style="width:90px;">
							<div class="buttons" style="float:left; margin-left:5px;">
								<a href="" class="regular"><!-- class="regular"-->
									<img src="../images/btn_apply.png" alt=""/> 
									添加
								</a>
							</div>
						</th>
						<th style="width:140px;">
							图书名
						</th>
						<th style="width:120px;">
							ISBN
						</th>
						<th style="width:520px;">
							关联方式
						</th>
						<th style="width:90px;">
							<div class="buttons" style="float:left; margin-left:5px;">
								<a href="" class="regular"><!-- class="regular"-->
									<img src="../images/btn_cross.png" alt=""/> 
									清空
								</a>
							</div>
						</th>
					</tr>
					<tr>
						<td><img src="../images/btn_cross.png" alt=""/></th>
						<td>大熊小熊</td>
						<td>9-778-56766-9</td>
						<td colspan="2" align="left"><input type="radio" name="relationType"></input>单向关联&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="relationType"></input>双向关联</td>
					</tr>
				</table>
				<div style="height:1px;clear:both;"></div>
			</div>
		</div>
	</div>
</div>
--%>